<template>
  <div class="mine">
    <div v-if="userDetail.auditor === '1' && unAuditCount > 0" class="floating-audit-info">
      <div class="floating-badge" @click="showAuditList">
        <i class="el-icon-document-checked"></i>
        <span>待审核 {{ unAuditCount }}条</span>
      </div>
    </div>
    <div class="page-header">
      <div class="user-profile">
        <template v-if="!token">
          <div class="not-logged">
            <i class="el-icon-user-solid"></i>
            <span>未登录，请先去登录</span>
            <el-button type="primary" size="small" @click="goLogin">去登录</el-button>
          </div>
        </template>
        <template v-else>
          <div class="avatar-wrapper" @click="handleAvatarClick">
            <el-avatar :size="80" :src="userAvatar"></el-avatar>
            <div v-if="userDetail.auditor === '1'" class="checker-badge">
              <img 
                src="@/assets/img/checker.png" 
                alt="审核员"
              >
            </div>
          </div>
          <div class="user-info">
            <h2 class="nickname">{{ wxUserinfo.nickname }}</h2>
            <div class="basic-info">
              <i class="el-icon-school"></i>
              <span>{{ userDetail.college }} | {{ userDetail.major }}</span>
              <el-tag 
                v-if="userDetail.auditor === '1'" 
                size="mini" 
                type="success"
                effect="dark"
              >审核员</el-tag>
            </div>
            <div class="edit-btn-wrapper">
              <el-button 
                type="primary" 
                size="small"
                plain
                icon="el-icon-edit-outline"
                @click="showEditDialog"
                class="edit-btn"
              >
                补充信息
              </el-button>
            </div>
          </div>
        </template>
      </div>
    </div>

    <div class="page-content" v-if="token">
      <!-- 基本信息卡片 -->
      <el-card class="info-card" shadow="hover">
        <div slot="header" class="card-header">
          <i class="el-icon-user"></i>
          <span>基本信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">
            <i class="el-icon-user-solid"></i>
            {{ userDetail.name }}
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            <i :class="userDetail.gender === '男' ? 'el-icon-male' : 'el-icon-female'"></i>
            {{ userDetail.gender }}
          </el-descriptions-item>
          <el-descriptions-item label="入学年份">
            <i class="el-icon-date"></i>
            {{ userDetail.admissionYear }}
          </el-descriptions-item>
          <el-descriptions-item label="毕业年份">
            <i class="el-icon-date"></i>
            {{ userDetail.graduationYear }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 联系方式卡片 -->
      <el-card class="info-card" shadow="hover">
        <div slot="header" class="card-header">
          <i class="el-icon-phone"></i>
          <span>联系方式</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="手机">
            <i class="el-icon-mobile-phone"></i>
            {{ userDetail.contactInfo }}
          </el-descriptions-item>
          <el-descriptions-item label="邮箱">
            <i class="el-icon-message"></i>
            {{ userDetail.email || '未设置' }}
          </el-descriptions-item>
          <el-descriptions-item label="现居地">
            <i class="el-icon-location"></i>
            {{ userDetail.currentResidence }}
          </el-descriptions-item>
          <el-descriptions-item label="家乡">
            <i class="el-icon-house"></i>
            {{ userDetail.hometown }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 工作信息卡片 -->
      <el-card class="info-card" shadow="hover">
        <div slot="header" class="card-header">
          <i class="el-icon-office-building"></i>
          <span>工作信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="单位">
            <i class="el-icon-suitcase"></i>
            {{ userDetail.workUnit }}
          </el-descriptions-item>
          <el-descriptions-item label="职位">
            <i class="el-icon-position"></i>
            {{ userDetail.position }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 我的活动卡片 -->
      <el-card class="info-card" shadow="hover">
        <div slot="header" class="card-header">
          <i class="el-icon-menu"></i>
          <span>我的活动</span>
        </div>
        <div class="activity-list">
          <div class="activity-item" @click="goToMyActivity">
            <i class="el-icon-date"></i>
            <span>我参与的活动</span>
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="activity-item" @click="goToMyMutual">
            <i class="el-icon-connection"></i>
            <span>我参与的合作</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </el-card>

      <!-- 底部操作区 -->
      <div class="bottom-actions">
        <el-button 
          type="text" 
          icon="el-icon-warning-outline"
          @click="goFeedback"
        >意见反馈</el-button>
        <el-button 
          type="danger" 
          plain
          icon="el-icon-switch-button" 
          @click="quitClick"
        >退出登录</el-button>
      </div>
    </div>
    <div style="height:5rem;"></div>

    <!-- 审核列表弹框 -->
    <el-dialog
      title="待审核列表"
      :visible.sync="auditDialogVisible"
      width="85%"
      custom-class="audit-dialog"
      :close-on-click-modal="false"
    >
      <div class="audit-header">
        <div class="total-info">
          <i class="el-icon-document"></i>
          <span>共 {{ auditList.length }} 条待审核信息</span>
        </div>
      </div>
      <el-table
        :data="auditList"
        style="width: 100%"
        :max-height="500"
        border
        stripe
      >
        <el-table-column
          prop="messageType"
          label="类型"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag :type="getTypeTag(scope.row.messageType)">
              {{ scope.row.messageType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          min-width="180"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          width="100"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-tooltip :content="getActionTip(scope.row.messageType)" placement="top">
              <el-button 
                type="primary" 
                size="mini"
                @click="handleAudit(scope.row)"
                icon="el-icon-view"
              >查看</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 补充个人信息弹框 -->
    <el-dialog 
      title="补充个人信息" 
      :visible.sync="dialogVisible"
      :width="isMobile ? '95%' : '500px'"
      :close-on-click-modal="false"
      :show-close="false"
      class="info-dialog"
    >
      <el-form 
        :model="formData" 
        :rules="rules"
        ref="infoForm"
        :label-width="isMobile ? '70px' : '85px'"
        :size="isMobile ? 'mini' : 'small'"
      >
        <!-- 基本信息补充 -->
        <div class="form-section">
          <div class="section-title">基本信息</div>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="现居地" prop="currentResidence">
            <el-input v-model="formData.currentResidence" placeholder="请输入现居地"></el-input>
          </el-form-item>
          <el-form-item label="家乡" prop="hometown">
            <el-input v-model="formData.hometown" placeholder="请输入家乡"></el-input>
          </el-form-item>
        </div>

        <!-- 添加工作信息部分 -->
        <div class="form-section">
          <div class="section-title">工作信息</div>
          <el-form-item label="工作单位" prop="workUnit">
            <el-input 
              v-model="formData.workUnit" 
              placeholder="请输入工作单位"
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="工作职务" prop="position">
            <el-input 
              v-model="formData.position" 
              placeholder="请输入工作职务"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
        </div>

        <!-- 标签信息补充 -->
        <div class="form-section">
          <div class="section-title">个人标签</div>
          <el-form-item label="工作方向" prop="workDirection">
            <div class="tag-selector" @click="showDirectionDrawer = true">
              <div class="selected-tags" :class="{ 'is-empty': !formData.workDirection.length }">
                <el-tag 
                  v-for="tag in formData.workDirection" 
                  :key="tag"
                  closable
                  size="small"
                  @close="removeTag('workDirection', tag)"
                >{{ tag }}</el-tag>
                <span v-if="!formData.workDirection.length" class="placeholder">请选择工作方向</span>
              </div>
              <i class="el-icon-arrow-right"></i>
            </div>
          </el-form-item>

          <el-form-item label="个人擅长" prop="personalSkill">
            <div class="tag-selector" @click="showSkillDrawer = true">
              <div class="selected-tags" :class="{ 'is-empty': !formData.personalSkill.length }">
                <el-tag 
                  v-for="tag in formData.personalSkill" 
                  :key="tag"
                  closable
                  size="small"
                  @close="removeTag('personalSkill', tag)"
                >{{ tag }}</el-tag>
                <span v-if="!formData.personalSkill.length" class="placeholder">请选择个人擅长</span>
              </div>
              <i class="el-icon-arrow-right"></i>
            </div>
          </el-form-item>

          <el-form-item label="兴趣爱好" prop="interests">
            <div class="tag-selector" @click="showInterestDrawer = true">
              <div class="selected-tags" :class="{ 'is-empty': !formData.interests.length }">
                <el-tag 
                  v-for="tag in formData.interests" 
                  :key="tag"
                  closable
                  size="small"
                  @close="removeTag('interests', tag)"
                >{{ tag }}</el-tag>
                <span v-if="!formData.interests.length" class="placeholder">请选择兴趣爱好</span>
              </div>
              <i class="el-icon-arrow-right"></i>
            </div>
          </el-form-item>
        </div>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-back" @click="handleCancel">返 回</el-button>
        <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加抽屉组件 -->
    <el-drawer
      title="选择工作方向"
      :visible.sync="showDirectionDrawer"
      direction="rtl"
      size="85%"
      custom-class="tag-drawer"
    >
      <div class="drawer-content">
        <div 
          v-for="(group, index) in directionOptions" 
          :key="index"
          class="tag-group"
        >
          <div class="group-title">{{ group.dictName }}</div>
          <div class="tag-list">
            <el-tag
              v-for="item in group.children"
              :key="item.dictName"
              :class="{ active: formData.workDirection.includes(item.dictName) }"
              @click.native="toggleTag('workDirection', item.dictName)"
            >{{ item.dictName }}</el-tag>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 个人擅长抽屉 -->
    <el-drawer
      title="选择个人擅长"
      :visible.sync="showSkillDrawer"
      direction="rtl"
      size="85%"
      custom-class="tag-drawer"
    >
      <div class="drawer-content">
        <div 
          v-for="(group, index) in strengthOptions" 
          :key="index"
          class="tag-group"
        >
          <div class="group-title">{{ group.dictName }}</div>
          <div class="tag-list">
            <el-tag
              v-for="item in group.children"
              :key="item.dictName"
              :class="{ active: formData.personalSkill.includes(item.dictName) }"
              @click.native="toggleTag('personalSkill', item.dictName)"
            >{{ item.dictName }}</el-tag>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 兴趣爱好抽屉 -->
    <el-drawer
      title="选择兴趣爱好"
      :visible.sync="showInterestDrawer"
      direction="rtl"
      size="85%"
      custom-class="tag-drawer"
    >
      <div class="drawer-content">
        <div 
          v-for="(group, index) in interestOptions" 
          :key="index"
          class="tag-group"
        >
          <div class="group-title">{{ group.dictName }}</div>
          <div class="tag-list">
            <el-tag
              v-for="item in group.children"
              :key="item.dictName"
              :class="{ active: formData.interests.includes(item.dictName) }"
              @click.native="toggleTag('interests', item.dictName)"
            >{{ item.dictName }}</el-tag>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 如果需要条形码，添加对应的元素 -->
    <svg id="barcode"></svg>

    <!-- 添加头像选择弹窗 -->
    <el-dialog
      title="选择头像"
      :visible.sync="avatarDialogVisible"
      width="90%"
      custom-class="avatar-dialog"
    >
      <div class="avatar-list">
        <div 
          v-for="index in 5" 
          :key="index"
          class="avatar-item"
          :class="{ active: selectedAvatar === getAvatarPath(index) }"
          @click="selectAvatar(index)"
        >
          <img :src="getAvatarPath(index)" :alt="`头像${index}`">
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="avatarDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAvatar" :loading="updating">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
import {
  getWxSign, 
  loginByOpenId, 
  getLoginUserInfo,
  getUnAuditCount,
  getCheckList,
  readCheckList,
  getDictValue,
  updateUserInfo,
  updateUserAvatar
} from "@/api/api";
import {
  removeToken,
  getToken,
  setToken,
  getWxUserinfoCookies,
  removeWxUserinfoCookies
} from "@/api/auth";
import JsBarcode from 'jsbarcode';

export default {
  data() {
    return {
      token: getToken(),
      // phone: window.localStorage.getItem("phone"),
      isband: null,
      wxUserinfo: {},
      userDetail: {},
      loading: false,     // 数据加载状态
      unAuditCount: 0,
      auditDialogVisible: false,
      auditList: [],
      dialogVisible: false,
      formData: {
        email: '',
        currentResidence: '',
        hometown: '',
        workUnit: '',
        position: '',
        workDirection: [],
        personalSkill: [],
        interests: []
      },
      directionOptions: [],
      strengthOptions: [],
      interestOptions: [],
      // 缓存字典数据
      dictCache: {
        industry_field: {
          loaded: false,
          data: []
        },
        personally_good: {
          loaded: false,
          data: []
        },
        self_hobbies: {
          loaded: false,
          data: []
        }
      },
      rules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        currentResidence: [
          { required: true, message: '请输入现居地', trigger: 'blur' }
        ],
        hometown: [
          { required: true, message: '请输入家乡', trigger: 'blur' }
        ],
        workUnit: [
          { required: true, message: '请输入单位', trigger: 'blur' },
          { max: 100, message: '不能超过100字', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '请输入职务', trigger: 'blur' },
          { max: 50, message: '不能超过50字', trigger: 'blur' }
        ],
        personalSkill: [
          { type: 'array', trigger: 'change' }
        ]
      },
      avatarDialogVisible: false,
      selectedAvatar: '',
      updating: false,
      showDirectionDrawer: false,
      showSkillDrawer: false,
      showInterestDrawer: false
    };
  },
  computed: {
    isMobile() {
      return window.innerWidth <= 768;
    },
    userAvatar() {
      // 如果有选择新头像，优先显示新选择的
      if (this.selectedAvatar) {
        return this.getLocalAvatarPath(this.selectedAvatar);
      }
      
      // 如果用户有设置头像，使用用户头像
      if (this.userDetail.profilePicture) {
        return this.getLocalAvatarPath(this.userDetail.profilePicture);
      }
      
      // 如果有微信头像，使用微信头像
      if (this.wxUserinfo.headimgurl) {
        return this.wxUserinfo.headimgurl;
      }
      
      // 如果都没有，使用默认头像
      return require('@/assets/img/profile/profile-default.png');
    }
  },
  created() {
    this.checkLoginUser();
    console.log("版本号:250213-0001")
    // this.wxUserinfo = JSON.parse(getWxUserinfoCookies())
    if (getToken()) {
      if (window.localStorage.getItem("userInfo")) {
        this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
      } else {
        this.userInfo = JSON.parse(
          window.localStorage.getItem("defaultUserInfo")
        );
      }
    }

    // this.getWxSign();
  },
  mounted() {
  },
  methods: {
    async checkLoginUser() {
      try {
        const res = await getLoginUserInfo({});
        if (res.code === 200) {
          this.userDetail = res.data;
          // 如果接口返回了邮箱、现居地和家乡，更新到表单数据中
          if (res.data.email || res.data.currentResidence || res.data.hometown) {
            this.formData.email = res.data.email || '';
            this.formData.currentResidence = res.data.currentResidence || '';
            this.formData.hometown = res.data.hometown || '';
          }
          // 如果是审核员，获取待审核数量
          if (this.userDetail.auditor === '1') {
            this.getUnAuditCount();
          }
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },
    getWxSign() {
      getWxSign({
        url: window.location.href,
      }).then((res) => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ["openTagList", "onMenuShareTimeline"], // 必填，需要使用的JS接口列表
          openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
        });
        wx.ready(function () {
          console.log("ready");
          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
        });
        wx.error(function (res) {
          console.log("error:" + res);
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
        });
        var btn = document.getElementById("launch-btn");
        btn.addEventListener("launch", function (e) {
          console.log("success");
        });
        btn.addEventListener("error", function (e) {
          console.log("fail", e.detail);
        });
      });
    },
    quitClick() {
      const that = this;
      this.$vux.confirm.show({
        // 组件除show外的属性
        content: "是否确定退出登录？",
        onCancel() {
        },
        onConfirm() {
          // ****************** start **********
          try {
            console.log("清理localStorage");
            // window.localStorage.clear();
            const storage = window.localStorage
            storage.clear()
          } catch (err) {
            console.log("清理localStorage失败:" + err);
          }
          try {
            console.log("清理token");
            removeToken();
            removeWxUserinfoCookies();
          } catch (err) {
            // alert(err)
            console.log("清理token失败:" + err);
          }
          //**************** end   *******************
          console.log("清理localStorage");
          // localStorage.clear();
          console.log("清理token");
          removeToken();
          removeWxUserinfoCookies();
          that.$vux.toast.show("退出成功");
          console.log("清理userInfo");
          // that.clearFun();
          setTimeout(() => {
            window.location.reload();
          }, 500)

        },
      });
    },
    clearFun() {
      // window.localStorage.removeItem("wxUserinfo3")
      removeWxUserinfoCookies()
      console.log("清理userInfo");
    },
    goSwitch() {
      this.$router.push({path: "/switch_patient"});
    },
    isLoginAndIsband() {
      const that = this;
      var user1 = JSON.parse(getWxUserinfoCookies())
      if (!getToken()) {
        that.$vux.confirm.show({
          // 组件除show外的属性
          content: "未登录,请先登录账号",
          onCancel() {
          },
          onConfirm() {
            // that.goLogin()
            that.loginByOpenId(user1.openid, user1.nickname, user1.headimgurl, user1.unionid)
            // that.$router.push({path: "/"});
          },
        });
        return false;
      } else {
        if (window.localStorage.getItem("isband") == "false") {
          this.$vux.confirm.show({
            // 组件除show外的属性
            content: "请添加就诊人",
            onCancel() {
            },
            onConfirm() {
              that.$router.push({path: "/my_patient"});
            },
          });
          return false;
        } else {
          return true;
        }
      }
    },
    async goOut() {
      const that = this;
      var or = await that.isLoginAndIsband();
      if (or) {
        this.$router.push({path: "/outpatient_records"});
      }
    },
    async goOutPay() {
      const that = this;
      var or = await that.isLoginAndIsband();
      if (or) {
        this.$router.push({path: "/outpatient_payment"});
      }
    },
    goPatient() {
      const that = this;
      if (!getToken()) {
        that.$vux.confirm.show({
          // 组件除show外的属性
          content: "未登录,请先登录账号",
          onCancel() {
          },
          onConfirm() {
            // that.goLogin()
            that.loginByOpenId(user1.openid, user1.nickname, user1.headimgurl, user1.unionid)
            // that.$router.push({path: "/"});
          },
        });
        return;
      }
      this.$router.push({
        path: "/my_patient",
      });
    },

    async goReg() {
      const that = this;
      var or = await that.isLoginAndIsband();
      if (or) {
        this.$router.push({
          path: "/registration_record",
        });
      }
    },
    async goHosRecords() {
      const that = this;
      var or = await that.isLoginAndIsband();
      if (or) {
        this.$router.push({
          path: "/hospital_records",
        });
      }
    },
    loginByOpenId(openId, nickname, avatar, unionid) {
      loginByOpenId({
        openId,
        nickname,
        avatar, unionid
      }).then(response => {
        setToken(response.data.token);
        window.localStorage.setItem("openId", response.data.openId);
        // this.$store.commit("updateTabbarItemShow", 0);
        // window.localStorage.removeItem("userInfo")
        this.$vux.toast.show("登录成功");
        setTimeout(() => {
          window.location.reload();
        }, 1500)

      })
    },
    async gofyRecords() {
      const that = this;
      var user1 = JSON.parse(getWxUserinfoCookies())
      if (!getToken()) {
        that.$vux.confirm.show({
          // 组件除show外的属性
          content: "未登录,请先登录账号",
          onCancel() {
          },
          onConfirm() {
            try {
              console.log("清理localStorage");
              // window.localStorage.clear();
              const storage = window.localStorage
              storage.clear()
            } catch (err) {
              console.log("清理localStorage失败:" + err);
            }
            try {
              console.log("清理token");
              removeToken();
              removeWxUserinfoCookies();
            } catch (err) {
              // alert(err)
              console.log("清理token失败:" + err);
            }
            // that.goLogin()
            that.loginByOpenId(user1.openid, user1.nickname, user1.headimgurl, user1.unionid)
            // that.$router.push({path: "/"});
          },
        });
      } else {
        that.$router.push({path: "/medical_record_copy_list"});
      }
      return;
    },

    async goInsp() {
      const that = this;
      var or = await that.isLoginAndIsband();
      if (or) {
        window.localStorage.removeItem("inpTabItem");
        window.localStorage.removeItem("inpIdx");
        this.$router.push({
          path: "/inspection",
        });
      }
    },
    goLogin() {
      //跳转到登录页
      // this.$router.push({path: "/"});
      this.$router.push({path: "/login"});
    },
    goChangPwd() {
      this.$router.push({
        path: "/changepwd",
      });
    },
    goFeedback() {
      this.$router.push({
        path: "/feedback",
      });
    },
    goChangePhone() {
      this.$router.push({
        path: "/changephone",
      });
    },
    goToMyActivity() {
      this.$router.push('/mine/activity');
    },
    goToMyMutual() {
      this.$router.push('/mine/mutual');
    },
    async getUnAuditCount() {
      try {
        const res = await getUnAuditCount({});
        if (res.code === 200) {
          this.unAuditCount = res.data || 0;
        }
      } catch (error) {
        console.error('获取待审核数量失败:', error);
      }
    },
    async showAuditList() {
      try {
        const res = await getCheckList({});
        if (res.code === 200) {
          this.auditList = res.data || [];
          this.auditDialogVisible = true;
        }
      } catch (error) {
        console.error('获取审核列表失败:', error);
        this.$message.error('获取审核列表失败');
      }
    },
    getTypeTag(type) {
      const typeMap = {
        '人员注册': 'success',
        '合作': 'primary',
        '活动': 'warning'
      };
      return typeMap[type] || 'info';
    },
    async handleAudit(row) {
      try {
        // 先调用已读接口
        await readCheckList({
          id: row.id
        });

        if (row.messageType === '活动') {
          // 跳转到活动详情页，并传入审核状态
          this.$router.push({
            path: '/activity/details',
            query: {
              id: row.correspondingId,
              isAudit: true
            }
          });
        } else if (row.messageType === '合作') {
          // 跳转到合作详情页，并传入审核状态
          this.$router.push({
            path: '/mutual/details',
            query: {
              id: row.correspondingId,
              isAudit: true
            }
          });
        } else if (row.messageType === '人员注册') {
          // 跳转到校友详情页，并传入审核状态
          this.$router.push({
            path: '/graduate/details',
            query: {
              id: row.correspondingId,
              isAudit: true
            }
          });
        }
        // 关闭弹窗
        this.auditDialogVisible = false;

        // 更新未读数量
        this.getUnAuditCount();
      } catch (error) {
        console.error('标记已读失败:', error);
        this.$message.error('标记已读失败');
      }
    },
    getActionTip(type) {
      const tipMap = {
        '人员注册': '审核用户注册信息',
        '合作': '审核合作互助信息',
        '活动': '审核活动信息'
      };
      return tipMap[type] || '审核信息';
    },
    async showEditDialog() {
      this.dialogVisible = true;
      await this.loadExistingOptions();
      
      this.formData = {
        ...this.formData,
        email: this.userDetail.email || '',
        currentResidence: this.userDetail.currentResidence || '',
        hometown: this.userDetail.hometown || '',
        workUnit: this.userDetail.workUnit || '',
        position: this.userDetail.position || '',
        workDirection: this.userDetail.workDirection ? this.userDetail.workDirection.split(',') : [],
        personalSkill: this.userDetail.personalSkill ? this.userDetail.personalSkill.split(',') : [],
        interests: this.userDetail.interests ? this.userDetail.interests.split(',') : []
      };
    },
    // 加载已有数据对应的选项
    async loadExistingOptions() {
      try {
        // 加载工作方向数据
        if (!this.dictCache.industry_field.loaded) {
          const res = await getDictValue({
            dictId: "",
            dictName: "行业领域",
            dictType: "industry_field",
            level: "2"
          });
          if (res.code === 200) {
            const options = res.data.map(item => ({
              ...item,
              leaf: false,
              children: []
            }));
            
            // 加载二级数据
            await Promise.all(options.map(async item => {
              const childRes = await getDictValue({
                dictId: item.dictId,
                dictName: "行业领域",
                dictType: "industry_field",
                level: "3"
              });
              if (childRes.code === 200) {
                item.children = childRes.data || [];
              }
            }));
            
            // 缓存数据
            this.dictCache.industry_field.data = options;
            this.dictCache.industry_field.loaded = true;
          }
        }
        // 使用缓存数据
        this.directionOptions = [...this.dictCache.industry_field.data];

        // 加载个人擅长数据
        if (!this.dictCache.personally_good.loaded) {
          const res = await getDictValue({
            dictId: "",
            dictName: "个人擅长",
            dictType: "personally_good",
            level: "2"
          });
          if (res.code === 200) {
            const options = res.data.map(item => ({
              ...item,
              leaf: false,
              children: []
            }));
            
            await Promise.all(options.map(async item => {
              const childRes = await getDictValue({
                dictId: item.dictId,
                dictName: "个人擅长",
                dictType: "personally_good",
                level: "3"
              });
              if (childRes.code === 200) {
                item.children = childRes.data || [];
              }
            }));
            
            // 缓存数据
            this.dictCache.personally_good.data = options;
            this.dictCache.personally_good.loaded = true;
          }
        }
        // 使用缓存数据
        this.strengthOptions = [...this.dictCache.personally_good.data];

        // 加载兴趣爱好数据
        if (!this.dictCache.self_hobbies.loaded) {
          const res = await getDictValue({
            dictId: "",
            dictName: "兴趣爱好",
            dictType: "self_hobbies",
            level: "2"
          });
          if (res.code === 200) {
            const options = res.data.map(item => ({
              ...item,
              leaf: false,
              children: []
            }));
            
            await Promise.all(options.map(async item => {
              const childRes = await getDictValue({
                dictId: item.dictId,
                dictName: "兴趣爱好",
                dictType: "self_hobbies",
                level: "3"
              });
              if (childRes.code === 200) {
                item.children = childRes.data || [];
              }
            }));
            
            // 缓存数据
            this.dictCache.self_hobbies.data = options;
            this.dictCache.self_hobbies.loaded = true;
          }
        }
        // 使用缓存数据
        this.interestOptions = [...this.dictCache.self_hobbies.data];
        
      } catch (error) {
        console.error('加载已有数据失败:', error);
        this.$message.error('加载已有数据失败');
      }
    },
    // 懒加载方法也使用缓存
    async handleDirectionLazyLoad(node, resolve) {
      const { level } = node;
      try {
        if (level === 0) {
          if (this.dictCache.industry_field.loaded) {
            resolve(this.dictCache.industry_field.data);
            return;
          }
          const res = await getDictValue({
            dictId: "",
            dictName: "行业领域",
            dictType: "industry_field",
            level: "2"
          });
          const options = res.code === 200 ? res.data.map(item => ({ ...item, leaf: false })) : [];
          this.dictCache.industry_field.data = options;
          this.dictCache.industry_field.loaded = true;
          resolve(options);
        } else if (level === 1) {
          const res = await getDictValue({
            dictId: node.data.dictId,
            dictName: "行业领域",
            dictType: "industry_field",
            level: "3"
          });
          resolve(res.code === 200 ? res.data : []);
        }
      } catch (error) {
        this.$message.error('加载工作方向失败');
        resolve([]);
      }
    },
    async handleStrengthLazyLoad(node, resolve) {
      const { level } = node;
      try {
        if (level === 0) {
          const res = await getDictValue({
            dictId: "",
            dictName: "个人擅长",
            dictType: "personally_good",
            level: "2"
          });
          resolve(res.code === 200 ? res.data.map(item => ({ ...item, leaf: false })) : []);
        } else if (level === 1) {
          const res = await getDictValue({
            dictId: node.data.dictId,
            dictName: "个人擅长",
            dictType: "personally_good",
            level: "3"
          });
          resolve(res.code === 200 ? res.data : []);
        }
      } catch (error) {
        this.$message.error('加载个人擅长失败');
        resolve([]);
      }
    },
    async handleInterestLazyLoad(node, resolve) {
      const { level } = node;
      try {
        if (level === 0) {
          const res = await getDictValue({
            dictId: "",
            dictName: "兴趣爱好",
            dictType: "self_hobbies",
            level: "2"
          });
          resolve(res.code === 200 ? res.data.map(item => ({ ...item, leaf: false })) : []);
        } else if (level === 1) {
          const res = await getDictValue({
            dictId: node.data.dictId,
            dictName: "兴趣爱好",
            dictType: "self_hobbies",
            level: "3"
          });
          resolve(res.code === 200 ? res.data : []);
        }
      } catch (error) {
        this.$message.error('加载兴趣爱好失败');
        resolve([]);
      }
    },
    async submitForm() {
      try {
        await this.$refs.infoForm.validate();
        this.loading = true;
        
        const res = await updateUserInfo({
          id: this.userDetail.id,
          ...this.formData,
          workUnit: this.formData.workUnit.trim(),
          position: this.formData.position.trim(),
          workDirection: Array.isArray(this.formData.workDirection) ? this.formData.workDirection.join(',') : '',
          personalSkill: Array.isArray(this.formData.personalSkill) ? this.formData.personalSkill.join(',') : '',
          interests: Array.isArray(this.formData.interests) ? this.formData.interests.join(',') : ''
        });
        
        if (res.code === 200) {
          this.$message.success('信息更新成功');
          this.dialogVisible = false;
          await this.checkLoginUser();
        } else {
          this.$message.error(res.message || '更新失败');
        }
      } catch (error) {
        console.error('更新用户信息失败:', error);
        this.$message.error('更新失败，请重试');
      } finally {
        this.loading = false;
      }
    },
    handleCancel() {
      this.$confirm('确定要取消编辑吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'custom-message-box',
        width: '200px'  // 设置消息框宽度
      }).then(() => {
        this.dialogVisible = false;
        this.$refs.infoForm.resetFields();
      }).catch(() => {});
    },
    handleAvatarClick() {
      if (!this.userDetail.gender) {
        this.$message.warning('请先完善个人信息设置性别');
        return;
      }
      this.avatarDialogVisible = true;
      this.selectedAvatar = this.userDetail.profilePicture || '';
    },
    getAvatarPath(index) {
      // 从用户当前头像或性别判断应该显示男/女头像
      let gender = 'man';
      if (this.userDetail.profilePicture) {
        const match = this.userDetail.profilePicture.match(/profile-(man|women)/);
        if (match) {
          gender = match[1];
        }
      } else if (this.userDetail.gender === '女') {
        gender = 'women';
      }
      
      return require(`@/assets/img/profile/profile-${gender}-${index}.png`);
    },
    selectAvatar(index) {
      const gender = this.userDetail.gender === '女' ? 'women' : 'man';
      // 设置为服务器路径格式
      this.selectedAvatar = `/static/img/profile-${gender}-${index}.png`;
    },
    async confirmAvatar() {
      try {
        this.updating = true;
        const res = await updateUserAvatar({
          profilePicture: this.selectedAvatar
        });
        
        if (res.code === 200) {
          this.$message.success('头像更新成功');
          this.avatarDialogVisible = false;
          // 更新本地用户信息
          await this.checkLoginUser();
        } else {
          this.$message.error(res.message || '更新失败');
        }
      } catch (error) {
        console.error('更新头像失败:', error);
        this.$message.error('更新失败，请重试');
      } finally {
        this.updating = false;
      }
    },
    // 添加一个方法来转换服务器路径到本地路径
    getLocalAvatarPath(serverPath) {
      if (!serverPath) {
        // 如果路径为空，返回默认头像
        return require('@/assets/img/profile/profile-default.png');
      }
      
      const match = serverPath.match(/profile-(man|women)-(\d)\.[\w]+$/);
      if (match) {
        const [, gender, index] = match;
        return require(`@/assets/img/profile/profile-${gender}-${index}.png`);
      }
      return serverPath;
    },
    toggleTag(field, value) {
      const index = this.formData[field].indexOf(value);
      if (index > -1) {
        this.formData[field].splice(index, 1);
      } else {
        this.formData[field].push(value);
      }
    },
    removeTag(field, tag) {
      const index = this.formData[field].indexOf(tag);
      if (index > -1) {
        this.formData[field].splice(index, 1);
      }
    }
  },
};
</script>
<style lang="less" scoped>
.mine {
  height: calc(100vh);
  overflow-y: scroll;
  position: relative;
  background: url('~@/assets/img/login.png') no-repeat center center;
  background-size: cover;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 0;
  }

  .page-header {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    padding: 30px 20px;
    color: #fff;
    
    .user-profile {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 20px;
      
      .not-logged {
        display: flex;
        align-items: center;
        gap: 12px;
        
        i {
          font-size: 24px;
        }
      }
      
      .avatar-wrapper {
        position: relative;
        cursor: pointer;
        transition: opacity 0.3s ease;
        
        .checker-badge {
          position: absolute;
          right: -5px;
          bottom: -5px;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: #fff;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 2px;
          z-index: 1;  // 确保徽章在头像上层
          
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        
        &:hover {
          opacity: 0.8;
          
          &::after {
            content: '点击更换头像';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 2;  // 确保提示文字在最上层
          }
        }
      }
      
      .user-info {
        .nickname {
          font-size: 20px;
          margin: 0 0 8px;
          text-align: center;
        }
        
        .basic-info {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          opacity: 0.9;
          font-size: 14px;
          margin-bottom: 15px;
          
          .el-tag {
            margin-left: 8px;
            padding: 0 6px;
            height: 18px;
            line-height: 16px;
            font-size: 11px;
            border-radius: 9px;
            background-color: rgba(255, 255, 255, 0.15);
            border: none;
          }
        }

        .edit-btn-wrapper {
          text-align: center;
          margin-top: 15px;
          
          .edit-btn {
            padding: 8px 25px;
            height: 32px;
            font-size: 13px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.4);
            color: #fff;
            transition: all 0.3s ease;
            
            &:hover {
              background: rgba(255, 255, 255, 0.3);
              transform: translateY(-1px);
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
            
            i {
              margin-right: 4px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .page-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: -30px auto 0;
    padding: 20px;

    .info-card {
      margin-bottom: 20px;
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
      }
      
      .card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 500;
        
        i {
          color: #409EFF;
        }
      }
      
      :deep(.el-descriptions) {
        .el-descriptions-item__label {
          width: 80px;
          background: #fafafa;
        }
        
        .el-descriptions-item__content {
          display: flex;
          align-items: center;
          gap: 8px;
          
          i {
            color: #409EFF;
            font-size: 16px;
          }
        }
      }
    }

    .activity-list {
      .activity-item {
        display: flex;
        align-items: center;
        padding: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: 4px;
        
        &:not(:last-child) {
          border-bottom: 1px solid #ebeef5;
        }
        
        i:first-child {
          color: #409EFF;
          font-size: 18px;
          margin-right: 10px;
        }
        
        span {
          flex: 1;
          color: #303133;
        }
        
        .el-icon-arrow-right {
          color: #909399;
        }
        
        &:hover {
          background: #f5f7fa;
        }
      }
    }

    .bottom-actions {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 30px;
      padding: 20px 0;
      
      .el-button {
        min-width: 120px;
      }
    }
  }

  .floating-audit-info {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2000;
    
    .floating-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f56c6c;
      color: #fff;
      padding: 8px 15px;
      border-radius: 20px 0 0 20px;
      cursor: pointer;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      transition: all 0.3s ease;
      
      i {
        font-size: 16px;
      }
      
      span {
        font-size: 14px;
        white-space: nowrap;
      }
      
      &:hover {
        background: #f78989;
        padding-right: 20px;
        transform: translateX(-5px);
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .mine {
    .page-header {
      padding: 20px 15px;
      
      .user-profile {
        gap: 15px;
        
        .avatar-wrapper {
          .checker-badge {
            width: 20px;
            height: 20px;
          }
        }
        
        .user-info {
          .nickname {
            font-size: 18px;
          }
        }
      }
    }
    
    .page-content {
      padding: 15px;
      margin-top: -20px;
      
      .info-card {
        margin-bottom: 15px;
      }
      
      .bottom-actions {
        margin-top: 20px;
        padding: 15px 0;
        
        .el-button {
          min-width: 100px;
        }
      }
    }

    .floating-audit-info {
      .floating-badge {
        padding: 6px 12px;
        
        i {
          font-size: 14px;
        }
        
        span {
          font-size: 13px;
        }
        
        &:hover {
          padding-right: 15px;
        }
      }
    }
  }

  .audit-dialog {
    :deep(.el-dialog) {
      width: 98% !important;
      margin: 5vh auto !important;
    }
    
    :deep(.el-table) {
      font-size: 13px;
      
      .el-button {
        padding: 4px 8px;
        font-size: 12px;
      }
      
      .el-table__header th {
        padding: 8px 0;
      }
      
      .el-table__body td {
        padding: 8px;
      }
      
      .content-preview {
        font-size: 12px;
        padding: 4px 0;
      }
    }
  }
}

:deep(.audit-popover) {
  padding: 8px 12px;
  
  .el-popover__title {
    margin-bottom: 0;
  }
  
  .audit-info {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    
    i {
      color: #f56c6c;
      font-size: 16px;
    }
    
    span {
      color: #606266;
      font-size: 14px;
    }
  }
}

.audit-dialog {
  :deep(.el-dialog__body) {
    padding: 0 20px;
  }
  
  .audit-header {
    padding: 15px 0;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 15px;
    
    .total-info {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #606266;
      
      i {
        color: #409EFF;
        font-size: 16px;
      }
    }
  }
  
  .el-table {
    :deep(.el-table__body-wrapper) {
      overflow-x: auto !important;
    }
    
    .el-tag {
      border-radius: 12px;
      padding: 0 10px;
      font-weight: 500;
    }
    
    .content-preview {
      padding: 8px 0;
      line-height: 1.5;
    }
    
    :deep(.content-detail) {
      max-height: 300px;
      overflow-y: auto;
      line-height: 1.5;
      color: #303133;
      white-space: pre-wrap;
      word-break: break-all;
      padding: 10px;
    }
  }
  
  .dialog-footer {
    border-top: 1px solid #ebeef5;
    padding: 15px 0;
    text-align: center;
  }
}

.form-section {
  margin-bottom: 20px;
  
  .section-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
  }
}

/deep/ .el-cascader {
  width: 100%;
  
  .el-input__inner {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding-left: 15px;
    font-size: 14px;
    
    &::placeholder {
      color: #999;
    }
  }
}

.edit-btn {
  position: absolute;
  top: 20px;
  right: 20px;
}

.info-dialog {
  /deep/ .el-dialog {
    &.el-dialog--center {
      padding-bottom: 0;
    }
    
    .el-dialog__header {
      padding: 15px;
      border-bottom: 1px solid #ebeef5;
      margin: 0;
      
      .el-dialog__title {
        font-size: 16px;
        font-weight: 500;
      }
    }
    
    .el-dialog__body {
      padding: 15px;
      max-height: 70vh;
      overflow-y: auto;
      
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #dcdfe6;
        border-radius: 3px;
      }
      
      .form-section {
        margin-bottom: 15px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .section-title {
          font-size: 14px;
          color: #606266;
          margin-bottom: 12px;
          padding-left: 8px;
          border-left: 3px solid #409EFF;
        }
        
        .el-form-item {
          margin-bottom: 12px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .el-form-item__label {
            font-size: 13px;
            padding-right: 8px;
          }
          
          .el-form-item__content {
            .el-input__inner,
            .el-cascader {
              height: 32px;
              line-height: 32px;
            }
            
            .el-cascader {
              width: 100%;
            }
          }
          
          .el-form-item__error {
            padding-top: 2px;
            font-size: 12px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .info-dialog {
    /deep/ .el-dialog {
      .el-dialog__body {
        padding: 12px;
        max-height: 75vh;
        
        .form-section {
          margin-bottom: 12px;
          
          .section-title {
            font-size: 13px;
            margin-bottom: 10px;
          }
          
          .el-form-item {
            margin-bottom: 10px;
            
            .el-form-item__label {
              font-size: 12px;
            }
            
            .el-form-item__content {
              .el-input__inner,
              .el-cascader {
                height: 30px;
                line-height: 30px;
              }
            }
          }
        }
      }
      
      .el-dialog__footer {
        padding: 8px 12px;
        
        .el-button {
          padding: 6px 15px;
        }
      }
    }
  }
}

.user-info {
  .info-content {
    .school-info {
      font-size: 14px;
      color: #606266;
      margin-top: 8px;
    }

    .edit-btn-wrapper {
      margin-top: 12px;
      
      .edit-btn {
        padding: 8px 15px;
        font-size: 13px;
        border-radius: 4px;
        background: rgba(64, 158, 255, 0.1);
        border-color: #409EFF;
        color: #409EFF;
        
        &:hover {
          background: rgba(64, 158, 255, 0.2);
          transform: translateY(-1px);
          transition: all 0.3s ease;
        }
        
        i {
          margin-right: 4px;
          font-size: 14px;
        }
      }
    }
  }
}

.user-profile {
  flex-direction: column;
  text-align: center;
  
  .avatar-wrapper {
    margin-bottom: 15px;
  }
}

.avatar-dialog {
  .avatar-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
    padding: 20px;
    
    .avatar-item {
      cursor: pointer;
      border-radius: 8px;
      padding: 15px;
      text-align: center;
      transition: all 0.3s ease;
      
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }
      
      &:hover {
        background-color: #f5f7fa;
        
        img {
          transform: scale(1.05);
        }
      }
      
      &.active {
        background-color: #ecf5ff;
        border: 2px solid #409EFF;
        
        img {
          transform: scale(1.05);
        }
      }
    }
  }
  
  @media screen and (max-width: 768px) {
    .avatar-list {
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 10px;
      
      .avatar-item {
        padding: 8px;
        
        img {
          width: 80px;
          height: 80px;
        }
      }
    }
  }
}

.custom-message-box {
  width: 200px !important;  // 强制设置宽度
  padding-bottom: 10px !important;
  
  .el-message-box__header {
    padding: 12px 15px;
    
    .el-message-box__title {
      font-size: 15px;
    }
  }
  
  .el-message-box__content {
    padding: 20px 15px;
    font-size: 14px;
  }
  
  .el-message-box__btns {
    padding: 5px 15px 0;
    
    button {
      min-width: 80px;
      padding: 8px 15px;
    }
  }
}

// 移动端适配
@media screen and (max-width: 768px) {
  .custom-message-box {
    width: 260px !important;
    
    .el-message-box__header {
      padding: 10px;
      
      .el-message-box__title {
        font-size: 14px;
      }
    }
    
    .el-message-box__content {
      padding: 15px 10px;
      font-size: 13px;
    }
    
    .el-message-box__btns {
      padding: 5px 10px 0;
      
      button {
        min-width: 70px;
        padding: 6px 12px;
      }
    }
  }
}

.tag-selector {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  
  &:hover {
    border-color: #c0c4cc;
  }
  
  .selected-tags {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
    
    &.is-empty {
      padding: 0;
      
      .placeholder {
        line-height: 30px;
        color: #c0c4cc;
      }
    }
    
    .el-tag {
      margin-right: 6px;
      margin-bottom: 4px;
    }
  }
  
  .el-icon-arrow-right {
    color: #909399;
    font-size: 14px;
  }
}

.tag-drawer {
  :deep(.el-drawer__header) {
    margin-bottom: 0;
    padding: 16px;
    font-size: 16px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .drawer-content {
    padding: 16px;
    
    .tag-group {
      margin-bottom: 20px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .group-title {
        margin-bottom: 12px;
        padding-left: 8px;
        font-size: 14px;
        color: #606266;
        border-left: 3px solid #409EFF;
      }
      
      .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        
        .el-tag {
          cursor: pointer;
          user-select: none;
          
          &.active {
            background-color: #409EFF;
            border-color: #409EFF;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
